<template>
    <div>
        <Form :label-width="80" :model="user" :rules="ruleValidate" class="form" ref="user">
            <FormItem label="用户姓名" prop="name">
                <Input class="ipt" placeholder="请输入用户姓名" v-model="user.name"/>
            </FormItem>
            <FormItem label="登录账号" prop="username">
                <Input class="ipt" placeholder="请输入用户登录账号" v-model="user.username"/>
            </FormItem>
            <FormItem label="登录密码" prop="password">
                <Input class="ipt" placeholder="请输入用户登录密码" type="password" v-model="user.password" :password="true"/>
            </FormItem>
            <FormItem label="确认密码" prop="rePassword">
                <Input class="ipt" placeholder="请再次输入密码" type="password" v-model="user.rePassword" :password="true"/>
            </FormItem>
            <FormItem label="指定角色" prop="roleIds">
                <Select class="ipt" name="roleIds" placeholder="请选择" v-model="roleIds" multiple>
                    <template v-for="item in roleList">
                        <Option :value="item.id">{{item.name}}</Option>
                    </template>
                </Select>
            </FormItem>
            <FormItem>
                <Button @click="handleSubmit('user')" type="primary" v-has="this.$res.addUser">提交</Button>
                <Button type="info" ghost="ghost" @click="resetForm" style="margin-left: 8px">
                    重置
                </Button>
            </FormItem>
        </Form>
    </div>
</template>

<script>
    export default {
        name: 'addUser',
        metaInfo: {
            title: '添加用户',
        },
        data() {
            const validatePassCheck = (rule, value, callback) => {
                if (value !== this.user.password) {
                    callback(new Error('两次密码不一致'))
                } else {
                    callback()
                }
            };
            const validateRole = (rule, value, callback) => {
                if (rule.required && this.roleIds.length < 1) {
                    callback(new Error('请选择用户角色'))
                } else {
                    callback()
                }
            }
            return {
                user: {
                    name: '',
                    mobile: '',
                    username: '',
                    email: '',
                    password: '',
                    rePassword: '',
                    roleId: '',
                },
                roleList: [],
                roleIds: [],
                ruleValidate: {
                    name: [
                        {required: true, message: '用户姓名不能为空', trigger: 'blur'},
                        {min: 1, message: '用户名长度不能小于1位', trigger: 'blur'},
                        {max: 10, message: '用户名长度不能大于10位', trigger: 'blur'}
                    ],
                    username: [
                        {required: true, message: '用户名称不能为空', trigger: 'blur'},
                        {min: 3, message: '用户名长度不能小于6位', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '密码不能为空', trigger: 'blur'},
                        {min: 6, message: '密码长度不能小于6位', trigger: 'blur'}
                    ],
                    rePassword: [
                        {required: true, message: '确认密码不能为空', trigger: 'blur'},
                        {required: true, validator: validatePassCheck, trigger: 'blur'},
                    ],
                    roleIds: [
                        {required: true, validator: validateRole, trigger: 'change'}
                    ],
                },
            }
        },
        mounted() {
            this.getRole();
        },
        methods: {
            getRole: function () {
                this.$kit.ajaxGet(this.$res.listRole, {}, (res) => {
                    this.roleList = res.data.data
                }, this)
            },
            handleSubmit: function (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.user.roleId = this.roleIds.join(",");
                        this.$kit.ajaxPost(this.$res.addUser, this.user, (res => {
                            this.$Message.success(res.data.msg)
                            this.resetForm()
                        }), this)
                    } else {
                        this.$Message.error("请认真填写用户账号信息")
                    }
                })
            },
            resetForm: function () {
                this.$refs['user'].resetFields()
                this.roleIds = []
            }
        },
    }
</script>

<style scoped>
    .ipt {
        width: 500px;
    }

    .form {
        margin: 60px 0 10px 200px;
    }
</style>
